<template>
    <div>
        <!-- 搜索 -->
        <search />
        <!-- 轮播图 -->
        <div class="box">
            <swiper :images="images" imgwidth="95%" imgheight="150px" />
        </div>
        <div style="height: 100px;"></div>
        <!-- 宫格 -->
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <!-- 倒计时 -->
        <div class="time" v-show="skill">
            <div class="timeer">
                <span><b>京东秒杀倒计时</b>{{ second }}<b>秒</b></span>
            </div>
            <div class="timeimg">
                <img src="../../../img/111.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import search from '@/components/search.vue';
import swiper from '@/components/swiper.vue';
import { catitemsApi } from '@/api/api'
import { ref } from 'vue'
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
];
const catitemsApiData = ref([])
catitemsApi().then((res) => {
    console.log('导航数据', res);

    catitemsApiData.value = res.data.message
})
const skill=ref(true)
const second=ref(30)
let t1=setInterval(()=>{
    second.value--
    if(second.value==0){
        clearInterval(t1)
        skill.value=false
    }
},1000)
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 70px;
    background: rgb(158, 8, 8);
    text-align: center;
}
.time{
    width: 100%;
    // height: 50px;
    .timeer{
        color: #f00;
        b{
            color: #000;
            padding: 0 5px;
        }
    }
    img{
        width: 100%;
        height: 200px;
    }
}
</style>